<template >
  <div>
    <h1>京东</h1>
    <h1>数量：{{cartnum}}</h1>
    <h1>双倍：{{cartnumDou}}</h1>
    <button @click="changeCartNum(8)">mutations改变</button>
    <button @click="cartAction(10)">actions改变</button>
    <button @click="$router.push('/reg')">去注册</button>
    <div id="hello">你好</div>
    <h1 ref="torrow">明天放假</h1>
    <jd-son ref="myson"></jd-son>
    <jd-sss></jd-sss>
    <h1 ref="msg">{{msg}}</h1>
    <button @click="can">改变数据</button>
    <button @click="send">调用子组件的方法</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import jdSon from './jdson.vue'
import jdSss from './jdsss.vue'
export default {
  name: "jd",
  data () {
    return {
      msg: "地下城与勇士"
    }
  },
  components: { jdSon, jdSss },
  created () {
    // 想在created里操作dom  this.$nextTick()
    this.msg = "qq飞车"

    this.$nextTick(() => {
      // 在nextTick 函数 可以等待dom 更新或准备就绪后去操作
      console.log(this.$refs.msg)
    })

  },
  mounted () {
    var hello = document.getElementById("hello")
    console.log(hello)
    hello.style.color = "red";
    var torrow = this.$refs.torrow;
    console.log(torrow)
    // ref 标准  vue提供的可以获取dom元素和子组件
    // 获取子组件
    var jdson = this.$refs.myson;
    console.log(jdson.list) //子组件的数据

    // this.$chidren  获取所有子组件
    console.log(this.$children);
    this.$children[0].run("你好");
    console.log(this.$children[0].list)
    //ref获取组件 
    // $parent 获取父组件
    console.log(this.$refs.myson.$parent)
  },
  computed: {
    //        分模块名
    ...mapState("CartStore", ["cartnum"]),
    ...mapGetters("CartStore", ["cartnumDou"])
  },
  methods: {
    ...mapMutations("CartStore", ["changeCartNum"]),
    ...mapActions("CartStore", ["cartAction"]),
    send () {
      // 调用子组件的方法
      // this.$refs.myson.say()
      this.$refs.myson.run("你好")
    },
    can () {
      // this.msg = "穿越火线"
      // console.log(this.$refs.msg)
      this.$refs.msg.innerHTML = "穿越火线"
      console.log(this.$refs.msg)
    }
  },
}
</script>
<style lang="less">
</style>